<template>
	<view>		
		<!-- 状态栏 -->
		<view class="status" :style="{ position: headerPosition }"></view>
		<!-- 顶部导航栏 -->
		<view class="header" :style="{ position: headerPosition }">
			<!-- 定位城市 -->
			<view class="addr">
				<view class="icon location"></view>
				xuejss
			</view>
			<!-- 搜索框  -->
			<view class="input-box">
				<input
					placeholder="请输入查询关键字"
					placeholder-style="color:#c0c0c0;"
					@tap="toSearch()"
				/>
				<!-- <view class="lg text-gray icon-search"></view> -->
			</view>
			<!-- 右侧图标按钮 -->
			<view class="iconn-btn">
				<view class="lg text-gray icon-size icon-notification" @click="notification"></view>
				<view class="lg text-gray icon-size icon-roundadd" @click="roundadd"></view>
			</view>
		</view>
		<!-- 占位 --> 
				<!-- 占位 -->
		<view class="place"></view>
			<!-- 轮播 -->
			<swiper class="screen-swiper" :class="DotStyle?'square-dot':'round-dot'" indicator-dots="true" circular="true" autoplay="true"
	         interval="5000" duration="500">
		    <swiper-item v-for="(item,indexa) in bannerList" :key="indexa">
<!-- 			<image :src="'https://image.weilanwl.com/img/4x3-'+(indexa+1)+'.jpg'" mode='aspectFill'></image> -->
                <image :src="item.lj" mode='aspectFill'></image> 			
			
		    </swiper-item>
	        </swiper>	
						
			<!-- 四个按钮	  -->
			
		    <view class="cu-list grid" :class="[gridBorder?'':'no-border','col-'+gridCol]">
			<view class="cu-item" v-for="(item,indexb) in iconList" :key='indexb' v-if="indexb<gridCol*2" @tap="toPage(item.url)">
				<view :class="['icon-'+item.icon,'text-'+item.color]">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		    </view>	
			
			<!-- 滚动广告 -->
			
			<view class="uni-padding-wrap">
			<view class="uni-swiper-msg"> 
				<view class="uni-swiper-msg-icon">
		<!-- 			<image src="../../static/img/addricon.png" mode="widthFix"></image> -->
					<text class='icon-notice text-orange '></text>
				</view>
				<swiper autoplay="true" circular="true" interval="5000">
					<swiper-item v-for="(item, index) in msg" :key="index">
						<navigator>{{item}}</navigator>
					</swiper-item>
				</swiper>
			</view>
			</view>
			<!-- 文章头部 -->
		<view class="cu-bar bg-white margin-top" style="margin-top: 2px;">
			<view class='action'>
				<text class='icon-title text-orange '></text> 最新文章
			</view>
			<view class='action'>
			<!-- 	<button class='cu-btn bg-green shadow' @tap="showModal" :data-target="'ChooseModal'">发布</button> -->
				<view class="cu-tag round bg-olive light"  @tap="showModal" :data-target="'ChooseModal'">发布</view>
			</view>
		</view> 
				
		<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap='hideModal'>
			<view class="cu-dialog" catchtap>
				<view class="cu-bar bg-white">
					<view class='action text-green'>确定</view>
					<view class='action text-blue' @tap='hideModal'>取消</view>
				</view>
				<view class='grid col-3 padding-sm'>
					<view class='padding-xs' >
						<button class='cu-btn orange lg block line-orange' @click="fabuxq()">发布心情</button>
					</view>
					<view class='padding-xs' >
						<button class='cu-btn orange lg block line-mauve ' @click="fabumb()">发布模板</button>
					</view>
					<view class='padding-xs' >
						<button class='cu-btn orange lg block line-cyan '  @click="fabuop()">发布一图</button>
					</view>										
				</view>
			</view>
		</view>					
            <!-- 文章	列表				 -->
		<view class="cu-list menu menu-avatar" >
			
			<view class="cu-item" v-for="(lingan,indexsl) in lganList" :key="indexsl" @click="lgan_ck(lingan)">
				<view class="cu-avatar round lg" v-bind:style="{backgroundImage:'url(' + lingan.wximg + ')'}"></view>
				<view class='content'>
					<view class='text-grey'>{{lingan.title}} 
				<!-- 	<view class="cu-tag round bg-orange sm">Svip</view> -->
					</view>
					<view class='text-gray text-sm'>
						<text class="icon-locationfill text-orange margin-right-xs"></text> {{lingan.address}}</view>					
				</view>
				<view class='action'>
					<view class='text-grey text-xs'>{{lingan.dj}}</view>
					<view class="cu-tag round bg-grey sm">{{lingan.zan}}</view>
				</view>
			</view>	
			
	     			<!-- 文章结束				 -->
					
					<!-- 资源文章开始 -->
	     <view class="cu-bar bg-white margin-top" style="margin-top: 2px;">
	     	<view class='action'>
	     		<text class='icon-title text-orange '></text> 最新资源分享
	     	</view>
	     	<view class='action'>
	     			<view class="cu-tag round bg-olive light">你想要的都有</view>
	     	</view>
	     </view> 	
			 
			<view class="cu-item " v-for="(ziyuan,index) in ziyuanList" :key="ziyuan.infoid" @click="ziyuan_ck(ziyuan)">
				<view class="cu-avatar round lg" v-bind:style="{backgroundImage:'url(' + ziyuan.slimg + ')'}"></view>
				<view class='content'>
					<view class='text-cut'>{{ziyuan.title}} 
					<!-- <view class="cu-tag round bg-orange sm">Svip</view> -->
					</view>
					<view class='text-gray text-sm'>
						<text class="icon-new text-orange margin-right-xs"></text> {{ziyuan.fenlei}},{{ziyuan.times}}</view>					
				</view>
				<view class='action'>
					<view class='text-grey text-xs'>{{ziyuan.click}}</view>
					<view class="cu-tag round bg-grey sm">svip</view>
				</view>
			</view>	
			
			<!-- 资源文章结束 -->
			
			
			
			<!-- 模板结束				 -->
            <view class="cu-bar bg-white margin-top" style="margin-top: 2px;">
            	<view class='action'>
            		<text class='icon-title text-orange '></text> 最新模板
            	</view>
            	<view class='action'>
            		<!-- <button class='cu-btn bg-orange shadow' @tap="showModal" :data-target="'ChooseModal'">发布模板</button> -->
						<view class="cu-tag round bg-olive light">共有455个模板</view>
            	</view>
            </view> 
													
			<!-- 模板结束-->
		<view class="uni-product-list">
			<view class="uni-product muban-border" v-for="(product,indexs) in mubanList" :key="indexs" @click="mban_ck(product)">
				<view class="image-view">
					<image  class="uni-product-image" :src="product.img"></image>
				</view>
				<view class="uni-product-title">{{product.title}}</view>
				<view class="uni-product-price">
					<text class="uni-product-price-favour">￥5.98</text>
					<text class="uni-product-price-original">￥{{product.jqian}}</text>
					<text class="uni-product-tip">{{product.fenlei}}</text>
				</view>
			</view>
		</view>							
		<!-- 模板结束					 -->
							
			</view>				
	</view>

</template>

<script>
	var page=1 ,huan=1;
	export default {
		data() {
			
			return {
				title: 'Hello',
			    headerPosition: 'fixed',
				iconList: [{
					url:'../lgan/ziyuan_list/ziyuan_list',
					icon: 'crown',
					color: 'red',
					badge: 120,
					name: '资源'
				}, {
					url:'../lgan/lgan_list/lgan_list',
					icon: 'newshot',
					color: 'orange',
					badge: 1,
					name: '文档'
				}, {
					icon: 'goodsnew',
					color: 'yellow',
					badge: 0,
					name: '办公'
				}, {
					url:'../uilist/uilist',
					icon: 'clothes',
					color: 'olive',
					badge: 22,
					name: 'ui框架'
				},  {
					icon: 'pulldown',
					color: 'mauve',
					badge: 0,
					name: '已购'
				}],
				gridCol: 5,	
				modalName: '',	
				gridBorder: '',		
				mubanList : [],
				lganList:[],
				ziyuanList:[],				
				bannerList:[],
				PageCur: 'index',
			    DotStyle: '',
				msg : [
				'新版APP火热测试中...',
				'欢迎来到xuejss',
				'有需要开发APP的可以联系我'
				]
			}
			
		},
		onLoad() {
		// #ifdef H5
		this.top = '44px';
		// #endif
		page = 1;
		lganList : [];
		ziyuanList : [];		
		this.getNewsList();
		this.getlgannews();	
	    this.getzyuannews();			
		this.getbannerlist()		
		}, 
			onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = 'fixed';
			} else {
				this.headerPosition = 'absolute';
			}
		},
	//下拉刷新
	onPullDownRefresh : function(){
		// 重置分页及数据
		page = 1;	
		this.lganList = [];
		this.mubanList = [];	
	    this.ziyuanList = [];				
		this.getNewsList();
	    this.getzyuannews();			
		this.getlgannews()
	},
	// 加载更多
	onReachBottom : function(){
		this.getNewsList();
	},	
	onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../update/index'
			})
		},		
		methods: {
				getNewsList: function(){
				uni.showLoading({});
				//页数
				if(page >= 10){
					  setTimeout(function () {
					uni.showToast({"title":"已经加载全部", icon:"none"});
					},1000);
					return ;
				}
				
				uni.request({
				url: 'https://api.xuejss.com/xue/?s=muban.muban_list&page='+page,
				method: 'GET',
				data: {},
					success: res => {
						//console.log(res);
						var newsList = res.data.data.mblist;
						this.mubanList = this.mubanList.concat(newsList);

                        uni.hideLoading();
						page++;
					},
					complete: res => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			},
			getlgannews: function(){	
			uni.request({
			url: 'https://api.xuejss.com/xue/?s=wendang.lgan_list',
			method: 'GET',
			data: {},
				success: res => {
					console.log(res);
					var lgannewss = res.data.data;
					this.lganList = this.lganList.concat(lgannewss);
			        uni.hideLoading();
				},
				complete: res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			});	
				
			},
			//资源获取数据
			getzyuannews: function(){	
			uni.request({
			url: 'https://api.xuejss.com/xue/?s=ziyuan.zy_list',
			method: 'GET',
			data: {},
				success: res => {
					console.log(res);
					var ziyuannewss = res.data.data;
					this.ziyuanList = this.ziyuanList.concat(ziyuannewss);
			        uni.hideLoading();
				},
				complete: res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			});	
				
			},			
			
			
			// 结束
			
			//四个按钮跳转
			toPage(url){
				console.log("url: " + url);
				uni.navigateTo({
					url:url,
                    animationType: 'slide-in-bottom',
                    animationDuration: 200					
				})
			},			
			
			//
			getbannerlist: function(){	
			uni.request({
			url: 'https://api.xuejss.com/xue/?s=others.bananer_list',
			method: 'GET',
			data: {},
				success: res => {
					console.log(res);
					var lunbolist = res.data.data;
					this.bannerList = this.bannerList.concat(lunbolist);
			        uni.hideLoading();
				},
				complete: res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			});	
				
			},			

			lgan_ck(e){
				uni.navigateTo({
                url: '../lgan/lgan_xq/lgan_xq?id=' + e.infoid
                });
			},

			ziyuan_ck(e){
				uni.navigateTo({
                url: '../lgan/zyuan_xq/zyuan_xq?id=' + e.infoid+'&type='+e.type
                });
			},
			
			mban_ck(e){
				uni.navigateTo({
                url: '../goods/goods?infoid=' + e.infoid
                });
			},
						
			notification(){
				uni.navigateTo({
                url: '../msg/msg'
                });
			},
			fabuxq(){
				uni.navigateTo({
                url: '../fabu/fabu_xq'
                });				
			},
			fabumb(){
				uni.navigateTo({
                url: '../msg/msg'
                });				
			},						
			fabuop(){
				uni.navigateTo({
                url: '../msg/msg'
                });				
			}, 			
			DotStyles(e) {
				this.DotStyle = e.detail.value;
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target;
			},
			hideModal(e) {
				this.modalName = null;
			},
												
		}
	}
</script>

<style>
/* product */
.uni-product-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
}

.uni-product {
    padding: 20upx;
    display: flex;
    flex-direction: column;
}

.image-view {
    height: 586.96upx;
    width: 330upx;
	margin:12upx 0;
}

.uni-product-image {
    height: 586.96upx;
    width: 330upx;
}

.uni-product-title {
    width: 300upx;
    word-break: break-all;
    display: -webkit-box;
    overflow: hidden;
	line-height:1.5;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.uni-product-price {
	margin-top:10upx;
    font-size: 28upx;
	line-height:1.5;
    position: relative;
}

.uni-product-price-original {
    color: #e80080;
}

.uni-product-price-favour {
    color: #888888;
    text-decoration: line-through;
    margin-left: 10upx;
}

.uni-product-tip {
    position: absolute;
    right: 10upx;
    background-color: #ff3333;
    color: #ffffff;
    padding: 0 10upx;
    border-radius: 5upx;
}
/* swiper msg */
.uni-swiper-msg{width:86%; flex-wrap:nowrap; display:flex;margin-left: 30upx;}
.uni-swiper-msg-icon{width:50upx; margin-right:20upx; margin-top: 8upx;}
.uni-swiper-msg-icon image{width:100%; flex-shrink:0;}
.uni-swiper-msg swiper{width:100%; height:50upx;}
.uni-swiper-msg swiper-item{line-height:50upx;}
</style>
<style lang="scss">
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}
	
	.header {
		width: 100%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */ 
	
		.addr {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 32upx;
			color: #98a7b0;
			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}
		.input-box {
			width: 100%;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;
			text-align: center;
			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}
			input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
			}
		}
		.iconn-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			line-height: 60upx;
		}
		
		.icon-size {
		    font-size: 19px;
            margin-left: 10px;	
			
		}
	}
	.place {
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
</style>